<template>
	<view class="content">
		<!-- <view class="steps-wrap">
			<view class="steps-list">
				<view class="steps-item active">
					<text>1</text>
				</view>
				<view class="steps-item">
					<text>2</text>
				</view>
			</view>
		</view> -->
		<!-- 真实的个人信息才能找到对的人哦 -->
		<view class="titlemsg">性别选择后不可修改哦</view>
		<view class="upload-wrap">
			<view class="avatar-wrap">
				<image class="avatar"  :src="seximg1" @click="sexSelector('1')"></image>
				<image class="avatar"  :src="seximg2" @click="sexSelector('2')" ></image>
			</view>
			
		</view>
		
		
		<view class="form-wrap">
			<view class="form-item">
				<view class="label">
					<text class="title">昵称</text>
				</view>
				<view class="value">
					<input class="uni-input" v-model="form.name" @input="onInput"  @blur="outblur" placeholder="请填写您的昵称" />
				</view>
			<!-- 	<view class="uni-icon uni-icon-arrowright"></view> -->
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">性别</text>
					<text class="tips">（注册后不可更改）</text>
				</view>
				<view class="value">{{sexname}}</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">年龄</text>
				</view>
				<view class="value">
					<picker @change="ageSelector" :value="ageIndex" :range="ageList">
						<view>{{ageList[ageIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">情感状态</text>
				</view>
				<view class="value">
					<picker @change="marriageSelector" :value="marriageIndex" :range="marriageList">
						<view>{{marriageList[marriageIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">邀请码</text>
				</view>
				<view class="value">
					<input class="uni-input" v-model="form.tuid" placeholder="请填写邀请码(选填)" />
				</view>
				<!-- <view class="uni-icon uni-icon-arrowright"></view> -->
			</view>
		</view>
		<view class="btn-wrap">
			<button type="primary" @click="register">下一步</button>
		</view>
	</view>
</template>

<script>
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	export default {
		data() {
			return {
				myInfo: {},
				type: '',
				form: {
					tel: '',
					code: '',
					name: '',
					sex: '',
					age: '',
					marriage: '',
					channel: '0',
					tuid: '',
					device_code: ''
				},
				
				ageList: ['请选择年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70],
				ageIndex: 0,
				marriageList: ['请选择婚姻情况', '未婚', '离婚', '丧偶'],
				marriageIndex: 0,
				sexname:'请在上方选择性别',
				seximg1:'../../static/img/register/man-normal.png',
				seximg2:'../../static/img/register/female-normal.png',
				mgArr:[],
				isSensitive:false,
			}
		},
		onLoad(options) {
			this.type = options.type
			this.form.tel = options.tel
			this.form.code = options.code
			
			const sensitive = uni.getStorageSync('sensitive');
			if (!sensitive) {
				// 调取查询邀请码是否强制接口
				this.$api.api.ajaxData({
					method: 'V1.SensitiveWord',
				}, res => {
					if (res.status) {
						uni.setStorage({
						    key: 'sensitive',
						    data: res.data.data,
						    success: function () {
						         // console.log('敏感词缓存成功');
						    }
						});
						
					}
				})
			}else{
				this.mgArr=sensitive;
			}
			
		},
		onReady() {
			try {
				const device_code = uni.getStorageSync('device_code');
				this.form.device_code = device_code
			} catch (e) {
				console.log(e);
			}
			
		},
		methods: {
			// 昵称输入事件
			onInput(e){
				
				this.isSensitive = this.filtion(this.mgArr,e.detail.value)
			},
			outblur(){
				this.isSensitive = this.filtion(this.mgArr,this.form.name)
				
				if(this.isSensitive){
					uni.showToast({
						title: '昵称内含有违规内容，请重新输入',
						position: 'bottom',
						icon: 'none'
					});
				}
			},
			// 敏感词匹配事件
			filtion(arr, value) {
			    let re = '';
				let isming=false;
			    for (let i = 0; i < arr.length; i++) {
			        if (i==arr.length-1) {
			            re+=arr[i];
			        }else{
			            re+=arr[i]+"|";
			        }
			       
			        //利用RegExp可以动态生成正则表示式
			        let r = new RegExp(arr[i], "ig");
			        if(r.test(value)){
						
						//这里是有敏感词的情况下，已经标红，并且提示为false
						isming=true;
						return isming;
			        } 
			    }
			},
			// 选择性别
			sexSelector: function (e) {
				this.form.sex = e;
				if(e=='1'){
					this.sexname='男';
					this.seximg1="../../static/img/register/male-select.png";
					this.seximg2="../../static/img/register/female-normal.png"
				}else if(e=='2'){
					this.sexname='女';
					this.seximg2="../../static/img/register/female-select.png";
					this.seximg1="../../static/img/register/man-normal.png";
				}
			},
			
			ageSelector: function (e) {
				this.ageIndex = e.target.value
				this.form.age = this.ageList[this.ageIndex]
			},
			
			marriageSelector: function (e) {
				this.marriageIndex = e.target.value
				this.form.marriage = this.marriageIndex
			},
			
			register: function () {
				// uni.navigateTo({
				// 	url: 'avatar?sex=2',
				// });
				this.isSensitive = this.filtion(this.mgArr,this.form.name)
				
				if (this.form.name == '') {
					uni.showToast({
						title: '请输入昵称',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.sex == '' || this.form.sex == '0') {
					uni.showToast({
						title: '请选择性别',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.age == '' || this.form.age == '请选择年龄') {
					uni.showToast({
						title: '请选择年龄',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.marriage == '' || this.form.marriage == '0') {
					uni.showToast({
						title: '请选择婚姻情况',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if(this.isSensitive){
					uni.showToast({
						title: '昵称内含有违规内容，请重新输入',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: ''
				});
				this.form.tuid = !!this.form.tuid ? this.form.tuid : '0'
				this.form.method = 'V1.TelReg'
				if (this.type == 'fast') {
					this.form.method = 'V2.TelReg';
					delete this.form.code;
				}
				setTimeout(function(){
					uni.hideLoading();
				},2000)
				
				// console.log('注册时参数信息',this.form)
				this.$api.api.ajaxData(this.form, res => {
					
					uni.showToast({
						title: res.msg,
						position: 'bottom',
						icon: 'none'
					});
					if (res.status) {
						this.myInfo.id = res.data.id;
						this.myInfo.lid = res.data.lid;
						this.myInfo.name = res.data.name;
						this.myInfo.avatar = res.data.avatar;
						this.myInfo.tel = res.data.tel + '';
						this.myInfo.sex = res.data.sex;
						this.myInfo.age = res.data.age;
						this.myInfo.type = res.data.type;
						this.myInfo.vip = res.data.vip;
						this.myInfo.tuid = res.data.tuid;
						this.myInfo.channel = res.data.channel;
						this.myInfo.token = res.data.token;
						this.myInfo.UserSig = res.data.UserSig;
						uni.setStorage({
							key: 'myInfo',
							data: this.myInfo,
							success: function () {
								console.log('myInfo已存储');
							}
						});
						this.$tim.login({
							userID: this.IDBEFORE + res.data.id + '',
							userSig: res.data.UserSig,
						}).then(imResponse => {
							console.log('IM 登录成功:', imResponse.data);
						}).catch(imError => {
							console.warn('IM 登录失败:', imError);
						});
						uni.navigateTo({
							url: 'avatar?sex='+this.myInfo.sex,
						});
					}
				}, err => {
					
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.steps-wrap {
		padding: 80rpx 200rpx;
		.steps-list {
			display: flex;
			justify-content: center;
			align-items: center;
			.steps-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				background: #cbcbcb;
				border-radius: 60rpx;
				position: relative;
				margin: 0 78rpx;
				&.active {
					background: #FF76A8;
					&::before {
						background: #FF76A8;
					}
					&::after {
						background: #FF76A8;
					}
				}
				text {
					font-size: 20rpx;
					color: #fff;
				}
				&::before {
					content: '';
					width: 80rpx;
					height: 20rpx;
					background: #cbcbcb;
					position: absolute;
					left: -78rpx;
					top: 50%;
					margin-top: -10rpx;
				}
				&::after {
					content: '';
					width: 80rpx;
					height: 20rpx;
					background: #cbcbcb;
					position: absolute;
					right: -78rpx;
					top: 50%;
					margin-top: -10rpx;
				}
				&:first-child {
					margin-left: 0;
					&::before {
						display: none;
					}
				}
				&:last-child {
					margin-right: 0;
					&::after {
						display: none;
					}
				}
			}
		}
	}
	.form-wrap {
		padding: 0 20rpx;
		background: #fff;
		.form-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10rpx 20rpx;
			& + .form-item {
				border-top: 1rpx solid $border-dark-color;
			}
			.label {
				.title {
					color: $title-color;
					font-size: 30rpx;
				}
				.tips {
					color: $text-color;
					font-size: 24rpx;
				}
			}
			.value {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				height: 80rpx;
				color: $text-color;
				input {
					padding-right: 0;
					text-align: right;
				}
			}
			.uni-icon-arrowright {
				font-size: 24rpx;
				color: $text-color;
				margin-left: 10rpx;
			}
			.sex-picker {
				width: 100%;
				.uni-input {
					padding-right: 0;
					text-align: right;
				}
			}
		}
	}
	.btn-wrap {
		padding: 100rpx;
		button {
			border-radius: 100rpx;
			background-image: none;
			background-color: #fe2e61;
		}
	}
	.titlemsg{
		margin:38rpx 0 38rpx 70rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #979797;
		font-family:"SourceHanSansCN" !important;
	}
	
	// 上传头像
	.upload-wrap {
		background-color: #fff;
		padding: 50rpx 0;
	}
	
	.avatar-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		.avatar {
			width: 170rpx;
			height: 170rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
			&:first-child{
				margin-right: 140rpx;
			}
			// &.borersty{
			// 	border: 2rpx solid #fe2e61;
			// }
		}
		// 上传头像阴影
		.upavatar{
			background-color: rgba($color: #000000, $alpha: .4);
			position: absolute;
			width: 170rpx;
			height: 170rpx;
			border-radius: 50%;
			z-index: 33;
			.up-icon{
				width: 66rpx;
				height: 55rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
	
</style>